<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目跟踪</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_7dwa4qhqvsb.css">
    <style>
        .table > tbody > tr > td {
            height: 24px;
            max-height: 24px;
            overflow: hidden;
            position: relative;
        }

        .jiu {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 2px;
            right: 2px;
            background: url("/dist/img/jiu.png");
        }

        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
        }

        span.lineOne {
            line-height: 24px !important;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .lineOne.left{
            width: 90%;
            float: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table-detail select {
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }
        
        .gray td{
            color:#CCCCCC !important;
        }

        .fixed-table-box .fixed-table_header th,.fixed-table-box .fixed-table_body td{
            border-right: 1px solid #cbcbcd;
        }

        .t1 th,.t1 td{
            height: 0px;
            border: 0;
        }

        table.ui_dialog,.ui_inner{
            border: 0;
        }
        .table-hover>tbody>tr:hover{
            background-color:#ffffff;
        }

        .enableClick{
            cursor: pointer;
            color: #228bee;
        }

        .ui_dialog,.ui_inner,table.ui_border{
            border: 0 !important;
        }

        .fixed-table_body .red-s{
            color: red;
        }
        .icon-zk,.icon-sq{
            color: #2a8cec;
            font-size: 12px;
            cursor: pointer;
            bottom: 0;
            float: left;
            margin-top: 6px;
        }

        .overdue{
            color: red;
        }

        .t-overflow{
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
        .fixed-table_header tr th.t-write{
            background-color: #fff !important;
        }

        .t-status{
            width: 86%;
            text-align: center;
            float: left;
            line-height: 23px;
        }
        .border-b{
            border-bottom: 1px solid red;
        }
        
    </style>
</head>
<body>
<section class="content" id="app">
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <div class="div-td-content-more"><i></i></div>
    <div class="templateStyle">
        <div class="nav-tabs-custom oaReportNav">
            <div style="height: 25px; margin-bottom: 10px;">
                <input type="text" placeholder="关键字" class="form-control pull-left input-sm"
                       style="width: 200px;" v-model="keyWord" id="txtParent">
                <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="search">
                    查询
                </button>
                <input type="button" v-if="authorityList.cpLeader" value="新增需求" class="btn oaBtn btn-sm pull-right" @click="addPro('add',1,'cp')">
            </div>
        </div>
    </div>
    <div v-if="list.length==0" style="text-align: center;font-size: 30px;font-weight: bold;">暂无数据</div>
    <div class="box-body no-padding iframeH3" v-if="list.length>0" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <div class="fixed-table-box head-fixed ">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header"  style="table-layout: fixed" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                        <tr class="t1">
                            <th style="width:40px;" a="序号"></th>
                            <th style="width:130px;" a="需求名称"></th>
                            <th style="width:150px;" a="需求描述"></th>
                            <th style="width:50%;" a="需求分解"></th>
                            <th style="width:75px;" a="开始时间"></th>
                            <th style="width:75px;" a="结束时间"></th>
                            <th style="width:30px;" a="天数"></th>
                            <th style="width:50px;" a="负责人"></th>
                            <th style="width:100px;" a="状态"></th>
                            <th style="width:50%;" a="开发分解"></th>
                            <th style="width:75px;" a="开发时间"></th>
                            <th style="width:75px;" a="结束时间"></th>
                            <th style="width:30px;" a="天数"></th>
                            <th style="width:50px;" a="负责人"></th>
                            <th style="width: 85px;" a="状态"></th>
                            <th v-if="zw" style="width: 17px;" a="暂位"></th>
                        </tr>
                        <tr>
                            <th rowspan="2">
                                <div class="table-cells">序号</div>
                            </th>
                            <th  rowspan="2">
                                <div class="table-cells">需求名称</div>
                            </th>
                            <th  rowspan="2">
                                <div class="table-cells">需求描述</div>
                            </th>
                            <th colspan="6" class="t-write">
                                <div class="table-cells">产品</div>
                            </th>
                            <th :colspan="zw?7:6">
                                <div class="table-cells">开发</div>
                            </th>
                        </tr>
                        <tr>
                            <th class="t-write">
                                <div class="table-cells">需求分解</div>
                            </th>
                            <th class="t-write">
                                <div class="table-cells">开始时间</div>
                            </th>
                            <th class="t-write">
                                <div class="table-cells">结束时间</div>
                            </th>
                            <th class="t-write">
                                <div class="table-cells">天数</div>
                            </th>
                            <th  class="t-write">
                                <div class="table-cells">负责人</div>
                            </th>
                            <th class="t-write">
                                <div class="table-cells">状态</div>
                            </th>
                            <th>
                                <div class="table-cells">开发分解</div>
                            </th>
                            <th>
                                <div class="table-cells">开发时间</div>
                            </th>
                            <th><div class="table-cells">结束时间</div></th>
                            <th><div class="table-cells">天数</div></th>
                            <th><div class="table-cells">负责人</div></th>
                            <th style="border-right:0"><div class="table-cells">状态</div></th>
                            <th v-if="zw"><div class="table-cells"></div></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="fixed-table_body-wraper iframeFixed">
                <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                    <tbody id="tbList">
                        <tr class="t1">
                            <td style="width:40px;" a="序号"></td>
                            <td style="width:130px;" a="需求名称"></td>
                            <td style="width:150px;" a="需求描述"></td>
                            <td style="width:50%;" a="需求分解"></td>
                            <td style="width:75px;" a="开始时间"></td>
                            <td style="width:75px;" a="结束时间"></td>
                            <td style="width:30px;" a="天数"></td>
                            <td style="width:50px;" a="负责人"></td>
                            <td style="width:100px;" a="状态"></td>
                            <td style="width:50%;" a="开发分解"></td>
                            <td style="width:75px;" a="开发时间"></td>
                            <td style="width:75px;" a="结束时间"></td>
                            <td style="width:30px;" a="天数"></td>
                            <td style="width:50px;" a="负责人"></td>
                            <td style="width: 85px;" a="状态"></td>
                            <td v-if="zw" style="width: 17px;" a="暂位"></td>
                        </tr>
                        <template v-for="(item,i) in list">
                            <template v-for="(proItem,proi) in item.proList">
                                <tr>
                                    <td style="width:40px;" v-if="proItem.level1RowSpan!=0" :rowspan="proItem.level1RowSpan">{{proItem.sn}}</td>
                                    <td style="width:130px;text-align: left;" v-if="proItem.level1RowSpan!=0" :rowspan="proItem.level1RowSpan" class="enableClick" @click="addPro('decomposition',proItem.level1Id,'cp')">
                                        <div :class="(proItem.level1IsToday=='true'?'red-s':'') +' t-overflow'">{{proItem.level1ProName}}</div>
                                    </td>
                                    <td style="width:150px;text-align: left;" v-if="proItem.level1RowSpan!=0" :rowspan="proItem.level1RowSpan">
                                        <span class="lineOne left">{{proItem.level1ProDesc}}</span>
                                        <span @click="zkOrSqLevel2(proItem)" :class="'iconfont '+ (proItem.level2IsZK1=='true'? 'icon-sq': 'icon-zk')" v-if="proItem.level2Index == 0 && proItem.level2Count > 2"></span>
                                    </td>
                                        <template v-if="proItem.level2ProName.length==0 && proItem.level2IsZK=='true'">
                                            <td colspan="12"></td>
                                        </template>
                                        <template v-else>
                                            <td style="width:50%;text-align: left;" v-if="proItem.level2RowSpan!=0 && !authorityList.kfLeader && proItem.level2IsZK=='true'" :rowspan="proItem.level2RowSpan" class="enableClick">
                                                <div  @click="addTrack('decomposition',proItem.level2Id)" :class="(proItem.level2IsToday=='true'?'red-s':'') +' t-overflow'" >{{proItem.level2ProName}}</div>
                                            </td>
                                            <td style="width:50%;text-align: left;" v-if="proItem.level2RowSpan!=0 && authorityList.kfLeader && proItem.level2IsZK=='true'" :rowspan="proItem.level2RowSpan" class="enableClick">
                                                <div @click="addPro('decomposition',proItem.level2Id,'kf')" :class="(proItem.level2IsToday=='true'?'red-s':'') +' t-overflow'">{{proItem.level2ProName}}</div>
                                            </td>
                                            <td style="width:75px;" v-if="proItem.level2IsZK=='true' && proItem.level2RowSpan!=0" :rowspan="proItem.level2RowSpan">{{proItem.level2StartTime.substring(5,10)}}</td>
                                            <td style="width:75px;" v-if="proItem.level2IsZK=='true' && proItem.level2RowSpan!=0" :rowspan="proItem.level2RowSpan">{{proItem.level2EndTime.substring(5,10)}}</td>
                                            <td style="width:30px;" v-if="proItem.level2IsZK=='true' && proItem.level2RowSpan!=0" :rowspan="proItem.level2RowSpan">{{proItem.level2Days}}</td>
                                            <td style="width:50px;" v-if="proItem.level2IsZK=='true' && proItem.level2RowSpan!=0" :rowspan="proItem.level2RowSpan">{{proItem.level2ProPrincipalName}}</td>
                                            <td style="width:100px;" v-if="proItem.level2IsZK=='true' && proItem.level2RowSpan!=0" :rowspan="proItem.level2RowSpan">
                                                <div class="t-status" v-if="proItem.level2Status==1" ><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">未开始</span></div>
                                                <div class="t-status"  v-if="proItem.level2Status==2" ><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">设计中</span></div>
                                                <div class="t-status"  v-if="proItem.level2Status==3" ><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">已完成</span></div>
                                                <div class="t-status" style="color: red" v-if="proItem.level2Status==4" ><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">已完成-待审核</span></div>
                                                <div class="t-status" v-if="proItem.level2Status==5" ><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">已撤销</span></div>
                                                <div class="t-status" v-if="proItem.level2Status==6" :class="proItem.level2Status==6?'overdue':''"><span :class="(proItem.level2StatusChanged=='true'?'border-b':'')">已逾期</span></div>
                                                <span @click="zkOrSqLevel3(proItem)" :class="'iconfont '+ (proItem.level3IsZK1=='true'? 'icon-sq': 'icon-zk')" v-if="proItem.level3Index == 0 && proItem.level3Count >1"></span>
                                            </td>
                                            <template v-if="proItem.level3Count==0 && proItem.level3IsZK=='true'">
                                                <td colspan="6" style="padding:0" :class="(proItem.level2Status==3 && proItem.level3ProName=='' && authorityList.kfLeader?'flashing':'')">
                                                    <div v-if="proItem.level2Status==3 && proItem.level3ProName==''&& authorityList.kfLeader" 
                                                        @click="addPro('decomposition',proItem.level2Id,'kf')"
                                                        style="cursor: pointer;border:1px solid #228bee;width:100%;height: 100%;box-shadow:0px 0px 4px #228bee inset;"></div>
                                                </td>
                                            </template>
                                            <template v-else>
                                            <td style="text-align: left;width:50%;" class="enableClick" v-if="proItem.level3IsZK=='true'">
                                                <div @click="addTrack('decomposition',proItem.level3Id)" :class="(proItem.level3IsToday=='true'?'red-s':'')+' t-overflow'" >{{proItem.level3ProName}}</div>
                                            </td>
                                            <td style="width:75px;" v-if="proItem.level3IsZK=='true'">{{proItem.level3StartTime.substring(5,10)}}</td>
                                            <td style="width:75px;" v-if="proItem.level3IsZK=='true'">{{proItem.level3EndTime.substring(5,10)}}</td>
                                            <td style="width:30px;" v-if="proItem.level3IsZK=='true'">{{proItem.level3Days}}</td>
                                            <td style="width:50px;" v-if="proItem.level3IsZK=='true'">{{proItem.level3ProPrincipalName}}</td>

                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==''"></td>
                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==1"><span :class="proItem.level3StatusChanged=='true'?'border-b':''">未开始</span></td>
                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==2"><span :class="proItem.level3StatusChanged=='true'?'border-b':''">开发中</span></td>
                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==3"><span :class="proItem.level3StatusChanged=='true'?'border-b':''">已完成</span></td>
                                            <td style="width:85px;color: red" v-if="proItem.level3IsZK=='true' && proItem.level3Status==4"><span :class="proItem.level3StatusChanged=='true'?'border-b':''">已完成-待审核</span></td>
                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==5"><span :class="proItem.level3StatusChanged=='true'?'border-b':''">已撤销</span></td>
                                            <td style="width:85px;" v-if="proItem.level3IsZK=='true' && proItem.level3Status==6" :class="proItem.level3Status==6?'overdue':''" ><span :class="proItem.level3StatusChanged=='true'?'border-b':''">已逾期</span></td>
                                        </template>
                                    </template>
                                </tr>
                            </template>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    function refresh() {
        console.log('+++++++++'+$("#nowPage").text());
        $.wyui.page.getByPage();
    }

    var app = new Vue({
        el: '#app',
        data: {
            zw:true,
            currentUser: getCurrentUser(),
            list: [
                
            ],
            authorityList:{cpLeader:false,kfLeader:false},	
            companyList: [],
            keyWord:""
        },
        methods: {
            refresh:function(){
                var that = this;
                $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: currentUser.id}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        that.authorityList[data[i].eName] = true;
                    }
                },true);


                $.wyui.postMethod("/projectTrack/getPtList.json", {
                    userId: (that.authorityList.cpLeader || that.authorityList.kfLeader) ? "" : getCurrentUser().id,
                    keyWord:that.keyWord
                }, function (data) {
                    that.list = data.ptList;
                    console.log(data.ptList);
                    $(".iframeH3").css("height","");
                    setTimeout(() => {
                        var contentHeight = $(".fixed-table_body-wraper").height();
                        var winHeight = $(window).height()-100 -20;
                        if(winHeight>contentHeight)
                            that.zw =false;
                    }, 300);

                });
            },
            zkOrSqLevel3:function(item){
                var tempList = this.list;
                if(item.level3IsZK1 == "false" || item.level3IsZK1 == undefined)
                    item.level3IsZK1 = "true";
                else
                    item.level3IsZK1 ="false";

                for(var i=0;i<tempList.length;i++){
                    var innerList = tempList[i].proList;
                    for(var j=0;j<innerList.length;j++)
                        if(innerList[j].level2Id==item.level2Id && innerList[j].level3Index>0){
                            innerList[j].level3IsZK= item.level3IsZK1;
                        }
                }
            },
            zkOrSqLevel2:function(item){
                var tempList = this.list;
                if(item.level2IsZK1 == "false" || item.level2IsZK1 == undefined)
                    item.level2IsZK1 = "true";
                else
                    item.level2IsZK1 ="false";

                for(var i=0;i<tempList.length;i++){
                    var innerList = tempList[i].proList;
                    for(var j=0;j<innerList.length;j++)
                        if(innerList[j].level1Id == item.level1Id && innerList[j].level2Index>1){
                            innerList[j].level2IsZK = item.level2IsZK1;
                        if(innerList[j].level3Index<1)
                            innerList[j].level3IsZK = item.level2IsZK1;
                        }
                }
            },
            addPro:function(type,projectId,jiaose) {
                var pageT ="",title="";
                if(type == "decomposition")
                    pageT="&pageType=decomposition&projectId="+projectId+"&jiaose="+jiaose;
                else
                    pageT="&pageType=add"

                if(jiaose=='kf')
                    title = "开发分解";
                else if(type == "decomposition")
                    title = "需求分解";
                else
                    title = "新增需求";
                

                $.dialog({
                    content: 'url:addPro.html?a=b' + pageT,
                    title:"<div style='font-size:20px'>"+title+"</div>",//新增项目
                    width: 650,
                    height: 400,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            addTrack:function(type, projectId) {
                if(projectId == undefined || projectId == "")
                    return false;
                $.dialog({
                    content: 'url:addTrack.html?projectId='+projectId,
                    title: "<div style='font-size:20px'>进度跟踪</div>",
                    width: 650,
                    height: 400,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            search: function () {
                this.refresh();
            }
        },
        mounted: function () {
            var that = this;
            this.refresh();
        }
    });
    function refresh(toStart) {
        if(toStart)
            app.pageIndex=1;
        app.refresh()
    }
    //分页
    // $.wyui.page.dataUrl = server.ip + "/projectTrack/getPtList.json";
    // $.wyui.page.queryParams.pageType = $.wyui.page.urlParams.pageType;
    // $.wyui.page.queryParams.userId = getCurrentUser().id;
    // $.extend($.wyui.page.queryParams);
    // if($.wyui.page.urlParams.page){
    //     console.log($.wyui.page.queryParams.requestPage,$.wyui.page.urlParams.page )
    //     $.wyui.page.queryParams.requestPage = $.wyui.page.urlParams.page;
    // }
    //console.log('+++++++++'+$("#nowPage").text());
    // $.wyui.page.getByPage_callback = function (r) {
    //     app.list = r;
    //     //console.log(app.list.main)

    //     document.getElementById("scrollDiv").scrollTop = 0;
    //     $(".iframeH3").css("height","");
    //     setTimeout(() => {
    //         var contentHeight = $(".fixed-table_body-wraper").height();
    //         var winHeight = $(window).height()-100 -20;
    //         if(winHeight>contentHeight)
    //             app.zw =false;
    //     }, 300);
    // };

    $(window).resize(function(){
        setTimeout(function(){ 
            $(".iframeH3").css("height","");    
         }, 300);
        
    });
    // $.wyui.page.getByPage_scroll_callback = function (list) {
    //     if (list.length < 30) {
    //         isLoad = false;
    //     } else {
    //         for (var i = 0; i < list.length; i++) {
    //             app.list.push(list[i]);
    //         }
    //         isLoad = true;
    //     }
    // };
   
</script>
<script>
    setInterval(() => {
        $(".flashing").fadeOut(500).fadeIn(200); 
    }, 1000);
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>